<template>
  <div class="tag-list-container">
    <h2 class="title">
      标签列表
      <span @click="editTagDialogVisible = true">设置</span>
    </h2>
    <div class="tags-list-container">
      <ul class="tags-list">
        <li class="tags-item"
            @click="chooseTag(item)"
            :class="{'active':choosed.p_project_doc_file_sign_id===item.p_project_doc_file_sign_id}"
            v-for="(item, index) in userTagList"
            :key="index">
          {{ item.sign_name }}
        </li>
      </ul>
    </div>
    <EditTagDialog :dialogVisible.sync="editTagDialogVisible"
                   @callback="editTagCb"
                   :dialogStatus="'addUserTag'"></EditTagDialog>
  </div>
</template>
<script>
import EditTagDialog from './EditTagDialog'
import { ProjectFileApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      // 标签库标签列表
      userTagList: [

      ],
      // 设置标签弹框是否可见
      editTagDialogVisible: false,
      choosed: {}
    }
  },
  components: {
    EditTagDialog
  },
  props: {
    choosedTag: {
      type: Number
    }
  },
  methods: {
    getUserTagList () {
      ProjectFileApi.getTagList({
        params: {
          only_user: '1'
        }
      }).then(res => {
        if (res.code === 0) {
          this.userTagList = res.data.list
        }
      })
    },
    editTagCb () {
      this.getUserTagList()
    },
    chooseTag (item) {
      this.choosed = item
      this.$emit('update:choosedTag', item.p_project_doc_file_sign_id)
    }
  },
  created () {
    this.getUserTagList()
  },
  mounted () { }
}
</script>
<style scoped lang="scss">
.tag-list-container {
  width: 350px;
  height: auto;
  border: 1px solid #bfbfbf;
  margin-top: 20px;
  .title {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    background-color: #f5f5f5;
    border: 1px solid #bfbfbf;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    line-height: 48px;
    font-size: 16px;
    color: #333;
    display: flex;
    justify-content: space-between;
    span {
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .tags-list-container {
    padding: 20px;
    min-height: 500px;
    .tags-list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .tags-item {
        width: auto;
        height: 36px;
        line-height: 36px;
        padding: 0 12px;
        border: 1px solid #1890ff;
        background-color: #fff;
        color: #1890ff;
        font-size: 14px;
        border-radius: 4px;
        margin-bottom: 8px;
        margin-right: 8px;
        cursor: pointer;
        &.active {
          color: #fff;
          background-color: #1890ff;
        }
      }
    }
  }
}
</style>
